<!--用户资料编辑-->
<template>
  <f7-page no-toolbar :page-content="false">
    <f7-navbar back-link="Back">
      <f7-toolbar tabbar top>
        <f7-link tab-link="#baseTab" tab-link-active>资料</f7-link>
        <f7-link tab-link="#photoTab">照片</f7-link>
        <f7-link tab-link="#labelTab">标签</f7-link>
      </f7-toolbar>
    </f7-navbar>

    <!--基本资料-->
    <f7-tabs swipeable>
      <f7-tab id="baseTab" tab-active >

        <f7-page no-navbar>
        <f7-list form class="margin-top">
          <f7-list-input
                  label="昵称"
                  type="text"
                  placeholder="昵称"
          />
          <f7-list-input
                  label="性别"
                  type="select"
                  defaultValue="Male"
          >
            <option>男</option>
            <option>女</option>
          </f7-list-input>
          <f7-list-input
                         label="当前手机号"
                         name="username"
                         placeholder="请输入手机号码"
                         type="text"
          />
          <f7-list-input
                  label="身高"
                  name="username"
                  placeholder="请输入手机号码"
                  type="text"
          />
          //体重，职业，交友要求，城市
          <f7-list-input
                  label="出生日期"
                  type="date"
                  placeholder="出生日期"
                  value="2019-04-30"
          />
          <f7-list-input
                  label="个人签名"
                  type="textarea"
                  placeholder="个人签名"
          />
          <f7-list-input
                  label="当前手机号"
                  name="username"
                  placeholder="请输入手机号码"
                  type="text"
          />
          <f7-list-input
                  label="身高"
                  name="username"
                  placeholder="请输入手机号码"
                  type="text"
          />
          //体重，职业，交友要求，城市
          <f7-list-input
                  label="出生日期"
                  type="date"
                  placeholder="出生日期"
                  value="2019-04-30"
          />
          <f7-list-input
                  label="个人签名"
                  type="textarea"
                  placeholder="个人签名"
          />
        </f7-list>

          <f7-toolbar bottom >
            <f7-button style="color: white;width: 100%;margin: auto 5%;" class="col button button-fill button-round">保存</f7-button>
          </f7-toolbar>

<!--        <f7-list style="text-align: center;width: 90%;margin-top: -24px;margin-left: 5%;">
            <f7-button fill round text="保存"></f7-button>
        </f7-list>-->
        </f7-page>

      </f7-tab>


      <!--照片-->
      <f7-tab id="photoTab">
        <photoBrowerEdit></photoBrowerEdit>
      </f7-tab>

<!--兴趣标签-->
      <f7-tab id="labelTab" >
        <f7-page no-navbar>
        <labelListEdit></labelListEdit>

        <!--    <f7-fab href="/home/" position="center-bottom" slot="fixed" morph-to=".toolbar.fab-morph-target">
      <f7-icon icon="icon-back" ></f7-icon>
    </f7-fab>-->

        <f7-toolbar bottom>
          <f7-button style="color: white;width: 100%;margin: auto 5%;" class="col button button-fill button-round">保存</f7-button>
        </f7-toolbar>

        </f7-page>
      </f7-tab>
    </f7-tabs>


  </f7-page>
</template>

<script>
  import labelListEdit from '../../components/labelListEdit.vue';
  import photoBrowerEdit from '../../components/photoBrowerEdit.vue';

  export default {
    components: {labelListEdit,photoBrowerEdit},
    data() {
      return {
        swiperParams: {
          // speed: 500,
          loop: true,
          // height:600,
          // autoplay: {
          //   delay: 1500,
          // },
          direction:'vertical'
          // preventLinksPropagation: false   // 阻止点击事件冒泡
        },

        photos: [
          {
            url: 'img/beach.jpg',
            caption: 'Amazing beach in Goa, India',
          },
          'http://placekitten.com/1024/1024',
          'img/lock.jpg',
          {
            url: 'img/monkey.jpg',
            caption: 'I met this monkey in Chinese mountains',
          },
          {
            url: 'img/mountains.jpg',
            caption: 'Beautiful mountains in Zhangjiajie, China',
          },
        ],


      };
    },
    methods: {
      refresh(event, done) {
        setTimeout(() => {
          // todo
          done();
        }, 1000);
      },

    }
  }
</script>
